<template>
	<view class="ExaminationPassedList" :class="{ skelett: isSkelett }">
		<view class="ExaminationPassedList-main">
			<view
				class="ExaminationPassedList-main-item"
				:key="index"
				v-for="(item, index) in productList"
				:class="{ 'sold-out': !geSineleSoldOut(item) }"
			>
				<view class="ExaminationPassedList-main-item-title">
					<view>
						<text :class="[getSingleStatusClass(item)]">{{ getSingleStatusLable(item) }}</text>
					</view>
					<view>
						已赚：
						<text>¥</text>
						<text>{{ item.incomeYuan }}</text>
					</view>
				</view>

				<view class="ExaminationPassedList-main-item-content">
					<view class="ExaminationPassedList-main-item-content-left" @click.prevent.stop="openPreview(item)">
						<image :src="item.coverUrl || item.url" mode="aspectFill" />

						<template v-if="item.resourceType === 2">
							<image :src="videoIocn" class="video-icon" />
						</template>
					</view>

					<view class="ExaminationPassedList-main-item-content-right">
						<view :key="subItem.type" v-for="subItem in contentTypeList">
							<view>
								<text>{{ subItem.label }}</text>
							</view>
							<view>
								<template v-if="!isSkelett">{{ item[subItem.type] }}</template>
							</view>
						</view>
					</view>

					<image :src="soldOutIocn" class="sold-out-icon" />
				</view>

				<view class="ExaminationPassedList-main-item-footer">
					<view class="ExaminationPassedList-main-item-footer-button">
						<button
							:class="{
								'off-shelf': item.status
							}"
							:loading="index === currentIndex"
							@click.prevent.stop="changeSingleStaticStatus(item, index)"
						>
							{{ item.status ? '下架' : '上架' }}
						</button>
					</view>
				</view>
			</view>
		</view>

		<DistributionResourcePreview
			remote
			v-model="isPopup"
			:list="previewList"
			:index="previewCurrentIndex"
			:requestOtherParams="{
				preview: isPreview
			}"
		/>
		<!-- :requestOtherParams="{
				preview: false
			}" -->
	</view>
</template>

<script>
import { isNil } from 'lodash';
import { defaultImageUrl } from '@/utils';
import { changeOnOffShelf } from '@/api/material';

import DistributionResourcePreview from '@/components/distributionResourcePreview';

const videoIocn = Object.freeze(`${defaultImageUrl}icon/icon_xq_video.png`);
const soldOutIocn = Object.freeze(`${defaultImageUrl}image/img_download_soldout.png`);

const contentTypeList = Object.freeze([
	{
		type: 'downloadNum',
		label: '下载次数：'
	},
	{
		type: 'previewNum',
		label: '查看次数：'
	},
	{
		type: 'stock',
		label: '剩余可下载次数：'
	}
]);

export default {
	name: 'MaterialResource',

	props: {
		list: {
			type: Array,
			default: () => {
				return Array.from({ length: 6 }).map((item) => {});
			}
		},

		isPreview: {
			type: Boolean,
			default: false
		},

		isSkelett: {
			type: Boolean,
			default: true
		},

		skelettSize: {
			type: Number,
			default: 3
		}
	},

	data() {
		return {
			videoIocn,
			soldOutIocn,
			contentTypeList,

			currentIndex: null,

			isPopup: false,
			previewList: [],
			previewCurrentIndex: 0
		};
	},

	computed: {
		productList() {
			const { list, isSkelett, skelettSize } = this;

			if (!isSkelett) {
				return list;
			}

			return Array.from({ length: skelettSize }).map((item) => {});
		}
	},

	methods: {
		getSingleStatusLable(params = {}) {
			const { isSaleOut, status, stock } = params;

			// 是否售罄：1是0否
			if (isSaleOut || !stock) {
				return '已售罄';
			}

			// status 资源状态：0-已下架；1-已上架

			return status ? '售卖中' : '已下架';
		},

		getSingleStatusClass(params = {}) {
			const { isSaleOut, status, stock } = params;

			// 是否售罄：1是0否
			if (isSaleOut || !stock) {
				return 'sold-out';
			}

			// status 资源状态：0-已下架；1-已上架

			return status ? '' : 'off-shelf';
		},

		geSineleSoldOut(params = {}) {
			const { isSkelett } = this;
			const { isSaleOut, stock } = params;

			if (isSkelett) {
				return isSkelett;
			}

			if (isSaleOut || !stock) {
				return false;
			}

			return true;
		},

		changeSingleStaticStatus(params, index) {
			const { id } = params?.$orig || params;

			if (!isNil(this.currentIndex)) {
				return;
			}

			this.currentIndex = index;

			changeOnOffShelf({
				resourceId: id
			})
				.then((res) => {
					const { code, data } = res;

					if (code !== 200) {
						return;
					}

					if (!data) {
						uni.showToast({
							mask: true,
							icon: 'none',
							title: '操作失败'
						});
						return;
					}

					this.$nextTick((e) => {
						this.$emit('changeSingleMaterialStatus', index);
					});
				})
				.finally((e) => {
					this.currentIndex = null;
				});
		},

		openPreview(params = {}) {
			const { isSkelett } = this;
			const { id, url, pixel, coverUrl, previewUrl, resourceType } = params;

			if (isSkelett || !url) {
				return;
			}

			this.previewList = [
				Object.assign(
					{
						id,
						previewUrl: coverUrl,
						tempFilePath: previewUrl || url,
						type: resourceType === 1 ? 'image' : 'video'
					},
					pixel && {
						height: pixel.split('*')[1]
					}
				)
			];

			this.isPopup = true;
		}
	},

	components: {
		DistributionResourcePreview
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.ExaminationPassedList {
	&-main {
		&-item {
			min-height: 248rpx;
			background: #fff;
			border-radius: 24rpx;
			margin-top: 20rpx;
			padding: 20rpx 20rpx 0;

			&:first-child {
				margin-top: 0rpx;
			}

			&-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				view {
					&:first-child {
						text {
							color: #57ae59;
							font-size: 28rpx;
							border-radius: 8rpx;
							padding: 10rpx 20rpx;
							font-weight: bold;
							background: rgba(234, 245, 235, 0.8);

							&.off-shelf {
								color: $moneyColor;
								background: #feefed;
							}

							&.sold-out {
								color: #333;
								background: #f6f6f6;
							}
						}
					}

					&:last-child {
						color: #333;
						font-size: 28rpx;
						font-weight: bold;

						text {
							color: $moneyColor;
							font-size: 24rpx;

							&:last-child {
								font-size: 40rpx;
								font-family: font-number;
							}
						}
					}
				}
			}

			&-content {
				margin-top: 20rpx;

				display: flex;

				&-left {
					position: relative;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 16rpx;
					}

					.video-icon {
						position: absolute;
						top: 50%;
						left: 50%;
						width: 48rpx;
						height: 48rpx;
						transform: translate((-50%, -50%));
					}
				}

				&-right {
					flex: 1;
					padding: 8rpx 0 8rpx 20rpx;

					display: flex;
					flex-direction: column;
					justify-content: space-between;

					view {
						display: flex;
						align-items: center;
						justify-content: space-between;

						color: #333;
						font-size: 26rpx;

						view:last-child {
							font-weight: bold;
						}
					}
				}

				.sold-out-icon {
					display: none;
				}
			}

			&-footer {
				margin-top: 20rpx;

				height: 90rpx;
				border-top: 2rpx solid rgba(0, 0, 0, 0.04);

				display: flex;
				align-items: center;
				justify-content: flex-end;

				button {
					margin: 0;
					width: 160rpx;

					@include Db_commonButton(48rpx, 28rpx);

					font-size: 24rpx;

					&.off-shelf {
						color: #ff6b11;
						background: #fff;
						border: 2rpx solid #ff6b11;
					}
				}
			}

			&.sold-out {
				.ExaminationPassedList-main-item {
					&-content {
						position: relative;

						view {
							opacity: 0.6;
						}

						.sold-out-icon {
							display: block;
							position: absolute;
							right: 88rpx;
							top: 10rpx;
							width: 120rpx;
							height: 120rpx;
						}
					}

					&-footer {
						display: none;
					}
				}
			}
		}
	}

	&.skelett {
		.ExaminationPassedList-main-item {
			&-title {
				height: 48rpx;
				border-radius: 12rpx;
				background: $skelettBgColor;

				view {
					display: none;
				}
			}

			&-content-left,
			&-footer-button,
			&-content-right > view > view:first-child {
				border-radius: 12rpx;
				background: $skelettBgColor;

				text,
				image,
				button {
					visibility: hidden;
				}
			}
		}
	}
}
</style>
